var selectedChar = null;
var NOTIFICATIONTYPES = {OK:0,WARNING:1,ERROR:2};
var changes = {};

$(document).ready(function () {

    $(".characterPortrait").click(function () {

        console.log($(this).attr('name'));
        selectChar($(this));
    });

    $(".imgInput").change(function(){
        if(!readURL(this, $(this).attr("data-imgId"))){
            $(this).replaceWith($(this).clone(true));
            notificationHandler("invalid file", NOTIFICATIONTYPES.ERROR);
            clearMessage(4000);
        }
    });

    $("#clearButton").click(function () {
        changes = {};
        if(selectedChar != null){
            selectChar(selectedChar); //clears selected char
        }
        $("#editForm")[0].reset();
        $('.uploadImg').each(function() {
            $(this).attr("src", "#");
            $(this).attr("hidden", true);
        });
    });

    $("#commitButton").click(function () {
        $.ajax({
            type: "POST",
            url: "/gcChange",
            data: changes,
            contentType: "application/json",
            cache: false,
            timeout: 10000,

            success: function (data) {

                console.log(data);

            }, error: function (jqXHR, textStatus, errorThrown) {

                $("#message").html("<div id='serverErrorMessage'><p>" + 'error ' + textStatus + " " + errorThrown + "</p></div>");

            }
        });
    });

});

function notificationHandler(message, type) {
    switch(type){
        case NOTIFICATIONTYPES.OK:
            $("#message").html("<div id='serverOkMessage'><p>" + message + "</p></div>");
            break;
        case NOTIFICATIONTYPES.WARNING:
            $("#message").html("<div id='serverWarningMessage'><p>" + message + "</p></div>");
            break;
        case NOTIFICATIONTYPES.ERROR:
            $("#message").html("<div id='serverErrorMessage'><p>" + message + "</p></div>");
            break;
    }
}

function clearMessage(delay) {

    setTimeout(function () {

        $("#message").html("");

    }, delay);
}

function selectChar(cell){
    if(selectedChar !== null){
        selectedChar.find('img').css('border', 'none');
    }
    if(selectedChar != null && selectedChar.attr('name') === cell.attr('name')){
        selectedChar = null;
        $('.selChar').html('None Selected');
    } else {
        selectedChar = cell;
        selectedChar.find('img').css('border', '2px solid grey');
        $('.selChar').html(selectedChar.attr('name'));
    }

}

function readURL(input, target) {
    var targetElement = $(target);
    if (input.files && input.files[0] && input.files[0].type.indexOf("image") != -1) {
        var reader = new FileReader();
        reader.onload = function (e) {
            if(targetElement.attr('hidden')){
                targetElement.removeAttr('hidden');
            }
            targetElement.attr('src', e.target.result);
            targetElement.css({"width": '64px', "height": '64px'});
        }
        reader.readAsDataURL(input.files[0]);
        return true;
    } else {
        targetElement.attr('hidden', true);
        return false;
    }
}